<template>
  <div id="myDetail">
    <header div class="head">        
        <div class="back" @click="$router.push({path:'/wo'})">            
        <mu-icon value="chevron_left"  />
        </div>
        <div class="head_text" @click="" >
            我的订单           
        </div>
        <div class="flex1"></div>
        
    </header>
    <section class="my-order-cont">
        <ul class="order-nav">
            <li @click="act='stay',status='1'" class="order-nav-list" :class="{act:act=='stay'}">待支付</li>
            <li  @click="act='already',status='2'" class="order-nav-list"  :class="{act:act=='already'}">已支付</li>
            <li  @click="act='Evaluated',status='3'" class="order-nav-list order-nav-none-border"  :class="{act:act=='Evaluated'}"  >已完成</li>
        </ul>
        <!--  <pre>
                <code>
                    {{orderLists}}
                </code>
            </pre> -->
        <section class="order-list-cont" v-show="act=='stay'">
           
            <ul v-for="(item,index) in orderLists">
            <router-link :to="{path:'/orderDetail',query:{orderId:item.orderId,status:status}}">
                <li class="order-list">
                    <div class="order-img">
                        <img class="globalImg" :src='item.thumbUrl' />
                    </div>
                    <ul class="order-cont-sect">
                        <li class="order-list-comm order-list-name">
                            <p class="name-CN">{{item.roomTitle}}</p>
                            <p class="name-EN">{{item.roomTitleEn}}</p>
                        </li>
                        <li class="order-list-comm order-list-price"> 
                            ￥ <em>{{item.orderAmount}}</em> 元
                        </li>
                        <li class="order-list-comm order-list-date">
                            <div class="in-date date-comm">
                                <p>{{item.checkinTime}}</p>
                                <p>(入住)</p>
                            </div>
                            <div class="out-date date-comm">
                                <p>{{item.checkoutTime}}</p>
                                <p>(离开)</p>
                            </div>
                        </li>
                    </ul>
                </li> 
            </router-link>              
            </ul>
        </section>
        <section class="order-list-cont" v-show="act=='already'">
            <ul v-for="(item,index) in orderLists">
            <router-link :to="{path:'/orderDetail',query:{orderId:item.orderId,status:status}}">
                <li class="order-list">
                    <div class="order-img">
                        <img class="globalImg" :src='item.thumbUrl' />
                    </div>
                    <ul class="order-cont-sect">
                        <li class="order-list-comm order-list-name">
                            <p class="name-CN">{{item.roomTitle}}</p>
                            <p class="name-EN">{{item.roomTitleEn}}</p>
                        </li>
                        <li class="order-list-comm order-list-price"> 
                            ￥ <em>{{item.orderAmount}}</em> 元
                        </li>
                        <li class="order-list-comm order-list-date">
                            <div class="in-date date-comm">
                                <p>{{item.checkinTime}}</p>
                                <p>(入住)</p>
                            </div>
                            <div class="out-date date-comm">
                                <p>{{item.checkoutTime}}</p>
                                <p>(离开)</p>
                            </div>
                        </li>
                    </ul>
                </li> 
            </router-link>              
            </ul>
        </section>
        <section class="order-list-cont" v-show="act=='Evaluated'">
            <ul v-for="(item,index) in orderLists">
                <router-link :to="{path:'/orderDetail',query:{orderId:item.orderId,status:status}}">
                    <li class="order-list">
                        <div class="order-img">
                            <img class="globalImg" :src='item.thumbUrl' />
                        </div>
                        <ul class="order-cont-sect">
                            <li class="order-list-comm order-list-name">
                                <p class="name-CN">{{item.roomTitle}}</p>
                                <p class="name-EN">{{item.roomTitleEn}}</p>
                            </li>
                            <li class="order-list-comm order-list-price"> 
                                ￥ <em>{{item.orderAmount}}</em> 元
                            </li>
                            <li class="order-list-comm order-list-date">
                                <div class="in-date date-comm">
                                    <p>{{item.checkinTime}}</p>
                                    <p>(入住)</p>
                                </div>
                                <div class="out-date date-comm">
                                    <p>{{item.checkoutTime}}</p>
                                    <p>(离开)</p>
                                </div>
                            </li>
                        </ul>
                    </li> 
                </router-link>              
                </ul>
            <!-- <ul>
                <li class="order-list">
                    <div class="order-img">
                        <img class="globalImg" src="../../assets/images/pic01.png" />
                    </div>
                    <ul class="order-cont-sect">
                        <li class="order-list-comm order-list-name">
                            <p class="name-CN">我已经是完成的订单</p>
                             <p class="name-EN">YongKangLu ShangHaiShiKuMed</p>
                        </li>
                        <li class="order-list-comm order-list-price"> 
                            ￥ <em>1288.0</em> 元
                        </li>
                        <li class="order-list-comm order-list-date">
                            <div class="in-date date-comm">
                                <p>2016/12/24</p>
                                (入住)
                            </div>
                            <div class="out-date date-comm">
                                <p>2017/01/24</p>
                                (离开)
                            </div>
                        </li>
                    </ul>
                </li>               
            </ul> -->
        </section>
    </section>
    <mu-infinite-scroll  :loading="loading" @load="loadMore"/>
  </div>
</template>

<script>
    //require('../../assets/css/personalcenter.scss'); //引入的scss
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex'
    export default {
        name: 'myDetail', //组件的名字
        data() {
            return { //数据
                msg: 'myDetail',
                act: 'stay', //
                baseUrl: $.hsf.baseUrl,
                status: '1',
                loading: false,
                info: {
                    'rows': 10,
                    'page': 1,
                    'startRowNum': 1,
                    'orderStatus': '1'
                }
            }
        },
        methods: { //方法
            ...mapActions(['getorderInfoList']),
            gotoOrderDetail() {
                this.$router.push({
                    path: '/orderDetail'
                })
            },
            loadMore() { //上啦刷新
                this.loading = true
                this.info.rows += 2;
                //this.info.page += 1;
                setTimeout(() => {
                    this.initdatalist()
                    this.loading = false
                }, 1000)
            },
            initdatalist() {
                var info = this.info;
                var infos = JSON.stringify(info);
                this.getorderInfoList(infos);
            }
        },
        computed: { //计算 用来引入vuex里面state
            ...mapState(['orderLists']),
        },
        mounted: function() { //组件加载完成
            this.initdatalist()
        },
        watch: { //健康某个数据变化后触发某个事件
            status: function(val, oldval) {
                this.info.orderStatus = val
                this.info.rows = 10
                this.initdatalist()
            },
            'orderLists': function(val) {
                this.orderLists = this.orderLists.concat(val)
            }
        },
        destroyed: function() { //离开这个组件
        },
        components: {

        }

    }
</script>
<style scoped lang="scss">
    .my-order-cont {
        .act {
            color: red !important;
        }
        .order-nav {
            width: 100%;
            padding: 5px 15px;
            margin: 10px auto;
            display: flex;
            border-bottom: 2px solid #eee;
            background: #fff;
            .order-nav-list {
                flex: 1;
                position: relative;
                text-align: center;
                color: #333;
                height: 30px;
                line-height: 30px;
                border-right: 1px solid #eee;
                font-size: 14px;
                font-family: "微软雅黑";
            }
            .order-nav-none-border {
                border-right: none;
            }
        }
        .order-list-cont {
            /*border-top: 60px solid transparent;*/
            .order-list {
                display: flex;
                margin: 10px auto;
                padding: 5px 15px;
                border-bottom: 1px solid #eee;
                .order-img {
                    flex: 1;
                    position: relative;
                    text-align: left;
                    margin-right: 10px;
                }
                .order-cont-sect {
                    flex: 4;
                    position: relative;
                    text-align: left;
                    .order-list-comm {
                        margin-bottom: 5px;
                        color: #333;
                        .name-CN {
                            font-size: 18px;
                            font-weight: 600;
                            margin-top: -5px;
                        }
                    }
                }
            }
        }
    }
    
    .order-list-price em {
        color: #ff6c00;
        font-size: 18px;
        font-family: "微软雅黑";
    }
    
    .order-list-date {
        display: flex;
        .date-comm {
            flex: 1;
            position: relative;
            text-align: left;
        }
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->